<template>
	<div class="card-address">
		<div
			class="card-address-top0 flex flexC flexBetween"
			@click.stop="handleLogistics(dataitem)"
		>
			<div class="f1">
				<div class="item-info flex flexC">
					<img
						class="item-txt-icon  "
						src="@/assets/order/car.png"
						alt=""
					/>
					<div>快递单号:</div>
					<div>{{ dataitem.express_num }}</div>
				</div>
				<div class="item-info flex">
					<div class="item-txt-icon "></div>
					<div class="flex flexC">
						<div>物流公司:</div>
						<div>{{ dataitem.express_company }}</div>
					</div>
				</div>
			</div>
			<div class="edit" v-if="dataitem.type == 1">编辑</div>
		</div>
		<nut-divider
			style="color: #eeeeee; padding: 0 !important; margin: 10px 0"
		/>
		<div
			class="card-address-top0 flex flexC flexBetween"
			style="padding-bottom: 10px"
			@click.stop="handleOpenUse(dataitem)"
		>
			<div class="f1">
				<div class="item-info flex flexC">
					<img
						class="item-txt-icon "
						src="@/assets/order/user.png"
						alt=""
					/>
					<div>{{ dataitem.rec_name }}</div>
				</div>
				<div class="item-info flex">
					<div class="item-txt-icon "></div>
					<div class="flex flexC">
						<div>{{ dataitem.rec_phone }}</div>
					</div>
				</div>
				<div class="item-info flex">
					<div class="item-txt-icon  "></div>
					<div class="flex flexC">
						<div>{{ dataitem.rec_location }}{{ dataitem.rec_address }}</div>
					</div>
				</div>
			</div>
			<div class="edit" v-if="dataitem.type == 1">编辑</div>
		</div>
		<div
			class="card-address-top0 flex flexC flexBetween"
			@click.stop="handleMark(dataitem)"
		>
			<div class="f1">
				<div class="item-info flex ">
					<img class="item-txt-icon" src="@/assets/order/remark.png" alt="" />
					<div class="rmbox" >
						<div>
							<span class="remarkname">团员备注:</span>
							<span :class="dataitem.user_remark ? 'active' : ''">{{
								dataitem.user_remark || '无备注'
							}}</span>
						</div>
					</div>
				 
				</div>
				<div class="item-info flex  ">
					<div class="item-txt-icon"></div>
				 
						<div class="rmbox">
							<span class="remarkname">团长备注:</span>
							<span :class="dataitem.organizer_remark ? 'active' : ''">{{
								dataitem.organizer_remark || '无备注'
							}}</span>
						 <img
								v-if="dataitem.type != 2"
								class="item-txt-icon p-l-10 item-txt-icon1"
								src="@/assets/order/edit.png"
								alt=""
								
							/>
						</div>
					 
					 
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, computed, ref } from 'vue'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
//   `logistics_type` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1.快递 2.自提',
const props = defineProps(['data'])
const emits = defineEmits(['useopen', 'markopen', 'openkui'])
const ishide = computed(() => {
	if ((route.name = 'ordermanageinfo')) {
		return false
	} else {
		return true
	}
})
const dataitem: any = computed(() => {
	return props.data || {}
})
const handleOpenUse = (n: any) => {
	if (n.type == 2) {
		return
	}
	emits('useopen', n)
}
const handleMark = (n: any) => {
	if (n.type == 2) {
		return
	}
	emits('markopen', n)
}
const handleLogistics = (n: any) => {
	if (n.type == 2) {
		return
	}
	emits('openkui', n)
	// router.push({
	// 	path:`logistics/${n?.order_id }`
	// })
}
</script>
<style scoped lang="scss">
.card-address {
	margin: 20px 0;
	background: #f7f8f9;
	padding: 20px 20px;
	.item-txt {
		color: #000000;
		font-size: 26px;
		font-weight: bold;
		padding-bottom: 5px;
	}
	.item-info {
		font-size: 24px;
		padding: 5px 0;
	}
	.p-l-10 {
		padding-left: 10px;
	}
	.p-r-10 {
		padding-right: 10px;
	}
	.item-txt-icon {
		display: inline-block;
		width: 24px;
		height: 24px;
		padding-top:4px;
		margin-right:10px;
		
	}
	.item-txt-icon-p {
		display: block;
		width: 24px;
		height: 28px;
	}
	.edit {
		font-size: 24px;
		color: #999;
		padding: 20px 0;
	}
}
.remarkname {
	display: inline-block;
	width:120px;
}
.active {
	color: #f55726;
}
.rmbox{
	width: 100%;
	position: relative;
	 
}
.item-txt-icon1{
	 position: absolute;
    padding-top:0!important;
	 bottom:6px;
	 
}
</style>
